<template>
	<view class="container">
		<star-nav title="我的好友" :type="3" icon="/static/myimages/m7.png"></star-nav>
		<view class="contenr">
			<view class="headerT">
				<view v-for="(item,index) in arr" :key="index" :class="index==indexID?'firHea_active':'firHea'"
					@click="handleIndex(index)">{{item}}</view>
			</view>
			<view class="firList" v-if="indexID !=2">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
					<view v-if="friendList.length>0" v-for="(item,index) in friendList" :key="index" class="firBlock">
						<view class="imgLeft">
							<image v-if="item.isShow" @error="imaErr(index)" :src="imgUrl+item.avatarUrl" mode=""
								class="imaS"></image>
							<image v-else src="/static/myimages/m6.png" mode="" class="imaS"></image>
							<view class="left1">
								<view class="left1Name">{{item.nickname || '匿名'}}</view>
								<view class="leftID">ID:{{item.idNumber || 0}}</view>
							</view>
						</view>
						<!-- <view class="imgRight">
							<view class="imgRight1">贡献能量</view>
							<view class="imgRight2">{{item.frdContrib || 0}}</view>
						</view> -->
					</view>
					<view v-if="friendList.length==0" class="none">
						暂无信息
					</view>
				</scroll-view>
			</view>
			<view v-if="indexID ==2" class="shangji">
				<view class="imgLeft">
					<image v-if="isSuperiorImg" @error="superiorimaErr" :src="imgUrl+superior.avatarUrl" mode=""
						class="imaS"></image>
					<image v-else src="/static/myimages/m6.png" mode="" class="imaS"></image>
					<view class="left1">
						<view class="left1Name">{{superior.nickname || '匿名'}}</view>
						<view class="leftID">ID:{{superior.idNumber || 0}} wx:{{superior.wechatId || 0}}</view>
					</view>
				</view>
			</view>
			<view class="detail">
				<view class="contribution">
					<view class="contribution1">
						<view class="conTitle">直推人数</view>
						<view class="conSum1" style="color: #46D27B;">{{ztNum || 0}}</view>
					</view>
					<view class="contribution1">
						<view class="conTitle">间推人数</view>
						<view class="conSum1" style="color: #5D9EF0;">{{jtNum || 0}}</view>
					</view>
					<view class="contribution1">
						<view class="conTitle">团队人数</view>
						<view class="conSum1" style="color: #BB81F6;">{{teamCount || 0}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/config.js'
	import {
		allDegree,
		directReferral,
		indirectReferral,
		myUserLevel,
		MySuperior
	} from '@/api/plane.js'
	export default {
		data() {
			return {
				imgUrl: config.uploadUrl,
				indexID: 0,
				loading: false,
				scrollTop: 0,
				arr: ['直推好友', '间推好友', '我的上级'],
				model: {}, //贡献值
				params: {
					pageNo: 1,
					pageSize: 20
				},
				friendList: [],
				total: 0,
				teamCount: 0,
				ztNum: 0,
				jtNum: 0,
				isSuperiorImg: true,
				superior: {}, //我的上级
				imgShow: true
			}
		},
		onLoad() {
			this.getTotal()
			this.getAllDegree()
			this.teamNum()
			this.setDirectReferral()
		},
		methods: {
			superiorimaErr() {
				this.isSuperiorImg = false
			},
			imaErr(index) {
				this.friendList[index].isShow = false
			},
			lower() {
				if (indexID == 0) {
					if (this.friendList.length < this.total) {
						this.params.pageNo++
						this.setDirectReferral()
					}
				}
				if (indexID == 1) {
					if (this.friendList.length < this.total) {
						this.params.pageNo++
						this.setIndirectReferral()
					}
				}
			},
			//获取直推间推人数
			async getTotal() {
				let res1 = await directReferral(this.params)
				let res2 = await indirectReferral(this.params)
				this.ztNum = res1.data.total
				this.jtNum = res2.data.total
			},
			// 直推
			async setDirectReferral() {
				let res = await directReferral(this.params)
				this.friendList = [...this.friendList, ...res.data.records].map(item => {
					return {
						...item,
						isShow: true
					}
				})
				this.total = res.data.total
			},
			// 我的上级
			async setMySuperior() {
				let res = await MySuperior()
				this.superior = res.data
			},
			// 间推
			async setIndirectReferral() {
				let res = await indirectReferral(this.params)
				this.friendList = [...this.friendList, ...res.data.records].map(item => {
					return {
						...item,
						isShow: true
					}
				})
				this.total = res.data.total
			},
			// 贡献值
			async getAllDegree() {
				let res = await allDegree()
				this.model = res.data
			},
			// 团队人数
			async teamNum() {
				let res = await myUserLevel()
				this.teamCount = res.data.teamCount
			},
			handleIndex(index) {
				this.indexID = index
				this.params.pageNo = 1
				this.friendList = []
				if (index == 0) {
					this.setDirectReferral()
				}
				if (index == 1) {
					this.setIndirectReferral()
				}

				if (index == 2) {
					this.setMySuperior()
				}
			}
		}
	}
</script>

<style scoped>
	.shangji {
		width: 700rpx;
		min-height: 200rpx;
		display: flex;
		flex-direction: column;
		padding: 30rpx 0;
		box-sizing: border-box;
	}

	.none {
		width: 100%;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		opacity: 0.8;
	}

	.firHea {
		width: 192rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.firHea_active {
		background-color: #213659;
		color: #518BD4;
		width: 192rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.headerT {
		width: 100%;
		height: 100rpx;
		display: flex;
		color: #FFFFFF;
		border-bottom: 1rpx solid #4777B0;
		align-items: center;
		margin-bottom: 25rpx;
	}

	.imgRight2 {
		font-size: 35rpx;
		color: #5A99E7;
		font-weight: 800;
	}

	.imgRight1 {
		font-size: 33rpx;
		color: #FFFFFF;
		font-weight: 900;
		opacity: 0.6;
	}

	.imgRight {
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-left: 25rpx;
	}

	.leftID {
		font-size: 28rpx;
		font-size: 500;
		color: #FFFFFF;
		opacity: 0.5;
	}

	.left1Name {
		font-size: 37rpx;
		font-weight: bold;
		color: #FFFFFF;
		opacity: 0.8;
	}

	.left1 {
		flex: 1;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-left: 25rpx;
	}

	.imgLeft {
		flex: 1;
		display: flex;
	}

	.imaS {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
		border: 4rpx solid #4777B0;
		box-sizing: border-box;
	}

	.firBlock {
		width: 100%;
		height: 180rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 25rpx;
		box-sizing: border-box;
		margin-bottom: 25rpx;
		background-color: #1C2738;
		border-radius: 30rpx;
		border: 4rpx solid #2B374A;
	}

	.scroll-Y {
		width: 100%;
		height: calc(100vh - 750rpx);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.firList {
		width: 100%;
		height: calc(100vh - 750rpx);
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30rpx;

	}

	.conSum1 {
		font-size: 45rpx;
		font-weight: bold;
	}

	.conTitle {
		font-size: 30rpx;
		color: #FFFFFF;
		opacity: 0.7;
	}

	.contribution1 {
		width: 50%
	}

	.contribution {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.detail {
		width: 700rpx;
		height: auto;
		background-color: #192233;
		border-radius: 30rpx;
		border: 4rpx solid #2B374A;
		padding: 30rpx 25rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.contenr {
		width: 100%;
		height: calc(100vh - 116rpx);
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 50rpx 20rpx 10rpx 20rpx;
		box-sizing: border-box;

	}

	.container {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	}

	page {
		width: 100%;
		height: 100vh;
		background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	}
</style>